<template>

    <div class="blog-detail">

        <!--开头的说明-->
        <div class="mblog" style="min-height: 20px;">

            <div class="home-title">
                <h2>{{ blog.title }}</h2>
            </div>
<!--          <h2 class="m-text-500">分类 {{ categoryName }} 下的文章</h2>-->
            <div>资源内容登录后才能访问！</div>
            <div class="markdown-body" v-html="blog.content"></div>
        </div>

        <!--一个个的小卡片遍历-->
        <div class="friends-segment">
            <a :href="item.website" target="_blank" rel="external nofollow noopener" class="card" :style="randomRGB()"
               v-for="(item,index) in goodsList" :key="index">
                <div class="image">
                    <img :src="item.firstPicture" onerror="this.src = 'http://p3.qhimg.com/bdm/1024_768_100/t017baf7b77a994a54e.jpg'">
                </div>
                <div class="content">
                    <div class="header">{{ item.title }}</div>
                    <div class="description">{{ item.description }}</div>
                    <div class="div-btn">
                        <a class="color-btn" href="javascript:;" @click.prevent="toBlog(item.id)">订阅+</a>
                    </div>
                </div>
            </a>
        </div>
        <!--分页-->
        <div class="home-page" v-if="true">
            <el-pagination :current-page=currentPage
                           :page-size=pageSize
                           :total="total"
                           background
                           layout="total,prev, pager, next"
                           @current-change=getData>
            </el-pagination>
        </div>
        <!--版权信息-->
        <div class="author-message">
            <ul class="list">
                <li>作者：coder-msc（微信右下角）
<!--
                    <router-link style="text-decoration-line: none;" to="/about">（联系作者）</router-link>
-->
                </li>
                <li>发表时间：{{ blog.createTime }}</li>
                <li>最后修改：{{ blog.updateTime }}</li>
                <li>本站所有资源均来源于网络，仅供学习参考，如有侵权，非常抱歉，请立即（微信右下角）
                    <!--<router-link style="text-decoration-line: none;" to="/about">（联系作者）</router-link> -->联系作者删除！
                </li>
            </ul>
        </div>
        <!-- <div>
           <Comment></Comment>

         </div>-->

    </div>

</template>

<script>
    import 'github-markdown-css'
    import Comment from "@/components/Comment";

    export default {
        name: "Goods",
        components: {Comment},
        data() {
            return {
                typeId: 1,
                //pageInfo
                currentPage: 1,
                total: 1,
                pageSize: 10,
                pageShow: 0,

                blog: {},
                ownBlog: false,
                goodsList: [],
                bgColor: [
                    '#71bc98', '#2ecc71', '#3498db', '#9b59b6',
                    '#34495e', '#f1c40f', '#e6dc82', '#e74c3c',
                    '#b312ee', '#9980fa', '#e6d6de', '#f79f1f'
                ],
                info: {
                    content: '',
                    commentEnabled: false
                }

            }
        },
        methods: {
            getData(currentPage) {
                this.currentPage = currentPage
                const _this = this
                this.$axios.get('/sub/getSubscribes?pageIndex=' + this.currentPage + '&typeId=' + this.typeId).then((res) => {
                    _this.blogs = res.data.data.records
                    _this.total = res.data.data.total
                    _this.pageSize = res.data.data.size
                    _this.pageShow = 1
                });
                //改变页号后返回顶部
                this.scrollToTop()
            },
            getGoodsListByTypeId(currentPage) {
                this.currentPage = currentPage
                this.$axios.get('/sub/getSubscribes?pageIndex=' + this.currentPage + '&typeId=' + this.typeId).then((res) => {
                    this.goodsList = res.data.data.records
                    this.total = res.data.data.total
                    this.pageSize = res.data.data.size
                    this.pageShow = 1
                });
                //改变页号后返回顶部
                this.scrollToTop()
            },
            //跳转到资源详情页
            toBlog(goodsId) {
                this.$router.push(`/goods/detail/${goodsId}`)
            },
            getFriendBlog() {
                const _this = this
                this.$axios.get('/friends').then(res => {
                    _this.blog = res.data.data


                    var MardownIt = require("markdown-it")
                    var md = new MardownIt()

                    var result = md.render(_this.blog.content)
                    _this.blog.content = result
                    if (_this.$store.getters.getUser) {
                        _this.ownBlog = (_this.blog.userId === _this.$store.getters.getUser.id)
                    }
                })
            },
            getFriendList() {
                const _this = this
                this.$axios.get('/friend/all').then(res => {
                    _this.friendList = res.data.data
                })

            },

            randomRGB() {
                const index = Math.floor((Math.random() * this.bgColor.length))
                return {backgroundColor: this.bgColor[index]}
            },
            addViews(nickname) {
                this.$axios.get('/friend/onclick?nickname=' + nickname).then(res => {

                })
            }

        },
        created() {
            this.typeId = this.$route.params.typeId
            this.getGoodsListByTypeId(1)
            // this.getFriendList()


        },
        watch: {
            '$route'(to, from) {
                this.typeId = this.$route.params.typeId
                this.getGoodsListByTypeId(1)
            }
        },
    }
</script>

<style scoped>
    .mblog {
        min-height: 250px;


        padding: 5px 35px 5px 35px;
        text-align: left;
    }

    .home-title {
        margin-bottom: 40px;
    }

    .markdown-body {
        text-align: left;
    }

    .blog-detail {
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        background-color: white;
    }

    .author-message {
        text-align: left;
        background-color: honeydew;
        padding: 10px 5px 10px 5px;
        font-size: 14px;

    }

    .el-divider {
        margin: 1rem 0 !important;
    }


    .friends-segment {
        min-height: 300px;


        padding: 5px 35px 5px 35px;
        text-align: left;


    }

    .image {
        width: 70px;
        margin: 16px auto 0px;

    }

    .image img {
        /*        width:100%;
                height:auto;
                border-radius: 100% !important;*/
        width: 15vw;
        height: 23vh;
        margin-left: -5.21vw;

    }

    .card {
        display: inline-block;
        width: 15.5vw;
        margin: 15px 15px;
        /* text-align: center; */
        /* border-radius: 15px; */
        -webkit-text-decoration-line: none;
        text-decoration-line: none;
        border-radius: 7px;

    }

    .card .content .header {
        font-size: 16px !important;

    }

    .card .content {
        padding: 10px 2px;

    }

    .card .content .header {
        margin: -3px 0px 0px;
    }

    .card .content .description {
        font-size: 12px !important;
        margin: 5px 0px 9px;
    }

    .card .content * {
        color: #fff !important;
    }

    .home-page {
        text-align: center;
    }

    /*订阅按钮样式*/
    .color-btn {
        text-decoration-line: none;
        padding: 12px 25px;
        color: white;
        font-size: 13px;
        background: linear-gradient(to left, #020102, #303133);
        border-radius: 15px;
        min-width: 90px;
        margin-left: 126px;
        position: relative;
        height: 200px;
        width: 200px;

    }

    /*订阅按钮样式*/
    .div-btn {
        padding: 14px 5px 30px 5px;
        margin-top: 7px;
    }

</style>
